<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .highlight {
            color: white;
            background-color: black;
            padding: 10px;
            width: 250px;
            text-align: center;
        }
    </style>
</head>

<body>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <section>
        <p>this is my web</p>
    </section>
    <button id="cli" click="clickRadio">点击我</button>
    <script>
        // var link = document.querySelector("a");
        var link = document.querySelectorAll("a");

        // link.textContent = "hello world!";//修改链接中的文字
        // link.href = "http://www.baidu.com";//修改链接的URL地址
        link.forEach(function(i) {
            i.textContent = "hello world!";
            i.href = "http://www.baidu.com";
        })
        var sect = document.querySelector("section");
        var para = document.createElement("p"); //创建一个新的段落
        para.textContent = "we hope you enjoyed the rede";
        sect.appendChild(para); //追加新的段落
        var text = document.createTextNode("--the premier source for web development knowledge");
        var linkPara = document.querySelector("p");
        linkPara.appendChild(text);
        para.style.color = "white";
        para.style.backgroundColor = "black";
        para.style.padding = "10px";
        para.style.width = "250px";
        para.style.textAlign = "center";
        // para.setAttribute('class', 'highlight'); //设置属性
        // var clickRadio = function() {
        //     para.style.backgroundColor = "red";
        // }
    </script>
</body>

</html>